<template>
    <el-container style="height: 100%;">
        <el-header style="background-color:#545c64;">
            <el-row>

                <el-col :span="10">
                    <!-- 放菜单 
                   default-active:根据菜单index值，默认选中
                    mode="horizontal" 使菜单水平，默认垂直-->
                    <el-menu :default-active="'1'" mode="horizontal" router background-color="#545c64" text-color="#fff"
                        active-text-color="#ffd04b">
                        <el-menu-item index="/">首页</el-menu-item>
                        <el-submenu index="2">
                            <template slot="title">智能助手</template>
                            <el-menu-item index="ai">ACE-AI-1.0 + </el-menu-item>
                            <el-menu-item index="aipro">ACE-AI-1.5-flash</el-menu-item>

                        </el-submenu>
                        <el-menu-item index="strategy">成都·攻略景点</el-menu-item>
                        <el-menu-item index="globalShopping">文创</el-menu-item>
                        <el-menu-item index="productDetail">我的订单</el-menu-item>
                        <el-menu-item index="talk">旅游论坛</el-menu-item>
                        <el-menu-item index="my">我的</el-menu-item>
                        <el-submenu index="3">
                            <template slot="title">其他</template>
                            <el-menu-item index="login">退出登录</el-menu-item>
                            <el-menu-item>
                                <a href="mailto:" style="text-decoration: none; color: inherit;">
                                    我要投诉
                                </a>
                            </el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-col>

                <el-col :span="5" style="margin-top: 10px;">
                    <!-- 放搜索框 -->
                    <el-input style="width: 70%;" placeholder="请输入内容" v-model="content" clearable></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="searchContent">

                    </el-button>
                </el-col>

                <el-col :span="3" :offset="6" style="margin-top: 10px">
                    <!-- 登录按钮 -->
                    <!-- <el-button type="info" round>登录</el-button> -->
                    <h1 class="page-title">数智旅游信息平台(〃'▽'〃)</h1>
                </el-col>

            </el-row>
        </el-header>

        <el-main style="background-color:darkgray;">
            <router-view></router-view>
        </el-main>

    </el-container>
</template>

<script>
export default {
    data() {
        return {
            content: '',
        }
    },

    methods: {
        searchContent() {
            if (this.content.trim()) {
                // 使用默认搜索引擎（例如百度）打开新页面
                const encodedContent = encodeURIComponent(this.content.trim());
                window.open(`https://www.baidu.com/s?wd=${encodedContent}`, '_blank');
            } else {
                this.$message.warning('请输入内容后再搜索');
            }
        },
    }
}
</script>

<style scoped>
.page-title {
    font-size: 20px;
    /* 标题字号 */
    color: #ffffff;
    /* 白色字体 */
    text-align: center;
    /* 居中显示 */

    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
    /* 添加阴影，增强立体感 */
    font-family: 'Arial', sans-serif;
    /* 选择优雅字体 */
    background: linear-gradient(90deg, #525352, #7a5b6a);
    /* 背景渐变 */
    padding: 10px 20px;
    /* 内边距，增加块级效果 */
    border-radius: 8px;
    /* 圆角 */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
    /* 外边框阴影 */
}
</style>
